<div fxLayout="rows" fxLayout.lt-sm="column" fxLayoutGap="10px">
  <div fxFlex="1 1 calc(50% - 10px)">
    <h2 *ngIf="ms.game.enemyManager.currentEnemy">
      <i nz-icon [nzType]="ms.game.enemyManager.currentEnemy.icon"></i>
      {{ ms.game.enemyManager.currentEnemy.name }}
      <small
        >lv.
        {{ ms.game.enemyManager.currentEnemy.level | number: "1.0-0" }}

        <i nz-icon nzType="fa-s:arrows-alt-h" class="distance-icon"></i>
        <span>{{ ms.game.enemyManager.currentEnemy.distance | format }}</span>
      </small>
    </h2>
    <nz-button-group *ngIf="ms.game.enemyManager.currentEnemy">
      <button nz-button nzType="primary" (click)="attack(-1)">
        <span>Attack</span>
      </button>
      <button nz-button nzType="" (click)="nuke()">
        <span>Nuke &nbsp;</span>
        <span class="monospace nuke-btn">
          {{ needNuke | format: true }} ({{ nukePercent | percent }})</span
        >
      </button>
      <button nz-button nzDanger (click)="surrender()">
        <span>Surrender</span>
      </button>
      <button nz-button nzType="default" (click)="autoAttackOptions = true">
        <i nz-icon nzType="setting" nzTheme="outline"></i>
        <span>Options</span>
      </button>
    </nz-button-group>

    <strong>Automation:</strong>
    <form nz-form [nzLayout]="'inline'" class="auto-attack-form">
      <nz-form-item>
        <nz-form-label nzFor="auto">Attack</nz-form-label>
        <nz-form-control>
          <nz-switch
            name="auto"
            id="auto"
            [(ngModel)]="ms.game.enemyManager.autoAttackEnabled"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="autoNext">Next</nz-form-label>
        <nz-form-control>
          <nz-switch
            name="autoNext"
            id="autoNext"
            [(ngModel)]="ms.game.enemyManager.autoNext"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="autoReinforce">Reinforce</nz-form-label>
        <nz-form-control>
          <nz-switch
            name="autoReinforce"
            id="autoReinforce"
            [(ngModel)]="ms.game.shipyardManager.autoReinforce"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="autoNext">Nuke</nz-form-label>
        <nz-form-control>
          <nz-switch
            name="autoNuke"
            id="autoNuke"
            [(ngModel)]="ms.game.enemyManager.autoNuke"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>

    <nz-alert
      nzType="info"
      nzShowIcon
      nzMessage="Next attackable enemy will be attacked as soon as possible."
      *ngIf="
        !ms.game.enemyManager.currentEnemy && ms.game.enemyManager.autoNext
      "
    ></nz-alert>

    <app-battle-table
      *ngIf="ms.game.enemyManager.currentEnemy"
      [currentEnemy]="ms.game.enemyManager.currentEnemy"
    ></app-battle-table>

    <ng-container *ngIf="ms.game.enemyManager.currentEnemy">
      <br />
      <span>
        Losing streak:
        <span class="monospace">{{ ms.game.enemyManager.lostRow }}</span>
      </span>
      <br />
      <span>
        Kill streak:
        <span class="monospace">{{ ms.game.enemyManager.killStreak }}</span>
      </span>
      <br />
      <span>
        Experience reward:
        <span class="monospace">{{ expGain | format: true }}</span>
        <span *ngIf="expGain.lte(0)" class="text-warning">
          Enemy level is too low. Gain experience from lv.
          <span class="monospace"> 2 </span>
          every time you defeat enemies of max level (actual max lv is
          <span class="monospace">{{
            ms.game.enemyManager.maxLevel | format: true
          }}</span
          >).
        </span>
      </span>
      <br />
      <span>
        Dark matter reward:
        <span class="monospace">{{ darkMatterGain | time }}</span
        >.
        <span *ngIf="darkMatterGain.lte(0)" class="text-warning"
          >Enemy level is too low. Gain experience from lv.
          <span class="monospace"> 2 </span>
        </span>
      </span>
    </ng-container>
  </div>

  <div fxFlex="1 1 calc(50% - 10px)">
    <nz-tabset nzSize="small">
      <nz-tab nzTitle="Status">
        <ng-template nz-tab><app-fleets-view></app-fleets-view></ng-template>
      </nz-tab>
      <nz-tab nzTitle="Fleet 1">
        <ng-template nz-tab>
          <app-ships-view
            [designs]="ms.game.shipyardManager.shipDesigns"
            fleetNum="0"
            nzSize="small"
            update="true"
          >
          </app-ships-view>
        </ng-template>
      </nz-tab>
      <nz-tab nzTitle="Fleet 2">
        <ng-template nz-tab>
          <app-ships-view
            [designs]="ms.game.shipyardManager.shipDesigns"
            fleetNum="1"
            nzSize="small"
            update="true"
          >
          </app-ships-view
        ></ng-template>
      </nz-tab>
      <nz-tab nzTitle="Fleet 3"
        ><ng-template nz-tab>
          <app-ships-view
            [designs]="ms.game.shipyardManager.shipDesigns"
            fleetNum="2"
            nzSize="small"
            update="true"
          >
          </app-ships-view
        ></ng-template>
      </nz-tab>
      <nz-tab nzTitle="Fleet 4"
        ><ng-template nz-tab>
          <app-ships-view
            [designs]="ms.game.shipyardManager.shipDesigns"
            fleetNum="3"
            nzSize="small"
            update="true"
          >
          </app-ships-view
        ></ng-template>
      </nz-tab>
      <nz-tab nzTitle="Fleet 5"
        ><ng-template nz-tab>
          <app-ships-view
            [designs]="ms.game.shipyardManager.shipDesigns"
            fleetNum="4"
            nzSize="small"
            update="true"
          >
          </app-ships-view
        ></ng-template>
      </nz-tab>
    </nz-tabset>

    <br />
    <ng-container *ngIf="ms.game.enemyManager.currentEnemy">
      <h3>
        {{ ms.game.enemyManager.currentEnemy.name }}
        <small></small>
      </h3>
      <nz-select [(ngModel)]="cell" nzPlaceHolder="Choose">
        <nz-option
          *ngFor="let cell of activeCells; trackBy: getCellId"
          [nzValue]="cell.value"
          [nzLabel]="cell.label"
        ></nz-option>
        <nz-option nzValue="-1" nzLabel="Design"></nz-option>
      </nz-select>
      <app-ships-view
        *ngIf="ms.game.enemyManager.currentEnemy"
        [designs]="ms.game.enemyManager.currentEnemy.designs"
        [isEnemy]="true"
        [enemyCell]="true"
        [fleetNum]="cell"
        [enemy]="ms.game.enemyManager.currentEnemy"
        nzSize="small"
        update="true"
      ></app-ships-view
    ></ng-container>
  </div>
</div>

<nz-drawer
  [nzBodyStyle]="{
    height: 'calc(100% - 55px)',
    overflow: 'auto',
    'padding-bottom': '53px'
  }"
  [nzMaskClosable]="true"
  [nzWidth]="300"
  [nzVisible]="autoAttackOptions"
  nzTitle="Auto Attack Option"
  (nzOnClose)="autoAttackOptions = false"
>
  <ng-container *nzDrawerContent>
    <app-auto-attack-options></app-auto-attack-options>
  </ng-container>
</nz-drawer>
